<template>
    <div>
        <el-card>
            <div class="container">
                <el-image :src="userStore.userInfo?.avatar" class="image" />
                <div class="info">
                    <h3 class="title"> {{ getTimeMessage() }}好呀，{{ userStore.userInfo?.name }}</h3>
                    <p class="subtitle">运营平台</p>
                </div>
            </div>
        </el-card>
        <div class="bottom">
            <svg-icon name="welcome" height="380px" width="380px"></svg-icon>
        </div>
    </div>
</template>

<script setup lang='ts'>

import useUserStore from '@/store/modules/user'
import { getTimeMessage } from '@/utils/time';


const userStore = useUserStore()

</script>

<style scoped lang='scss'>
.container {
    display: flex;
    align-items: center;

    .image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    .info {
        margin-left: 20px;

        .title {
            font-size: 30px;
            font-weight: 900;
            margin-bottom: 30px;
        }

        .subtitle {
            font-style: italic;
            color: skyblue;
        }
    }
}
.bottom {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

</style>